<template>
  <MenuPage 
        :page.sync="queryBoardInfo.pageIndex"
        :size.sync="queryBoardInfo.pageSize"
        :columns="boardCol"
        :data="boardData"
        :total="boardCount"
        :loading="loading"
        noDataText="暂无数据"
        @queryFun="getBoardCastList">
      <template slot="search">
          <Button class="ml10" type="primary" @click="setChatAllRead">全部标记为已读</Button>
          <Select filterable
              v-model="lookStatus"
              placeholder="请选择已读状态"
              clearable
              class="w150"
              @on-change="changePage(1)"
          >
              <Option :value="1">是</Option>
              <Option :value="0">否</Option>
          </Select>
      </template>
      <Modal v-model="modal" title="公告详情" footer-hide class-name="fix-height-modal">
          <div v-html="curNotice.content" style="font-size:14px;" class="noticeContent"></div>
      </Modal>
  </MenuPage>
</template>
<script>
import { boardlist_new, changeMsgRead, setChatAllRead } from '@/api/boardcast_new.js';
import UserBoardcast from '@/components/board-cast/userBoardcast.vue';
import encryption from '@/libs/encryption.js';
import { mapActions, mapState } from 'vuex';
import clear from '@/assets/boardcast/clear.png';
import clear_hover from '@/assets/boardcast/clear_hover.png';
import more from '@/assets/boardcast/more.png';
import more_hover from '@/assets/boardcast/more_hover.png';
import New from '@/assets/boardcast/New.png';
import pageTitle from '@/mixin/pageTitle';
export default {
  components: { UserBoardcast},
  mixins:[pageTitle],
  data() {
      let September = sessionStorage.getItem('November');
      September = JSON.parse(encryption.SelfUseDecrypt(September));
      return {
          lookStatus: '',
          USER_ID: September.userId,
          USER_Name: September.nickname,
          isRootDesinger: September.isRootDesinger,
          modal: false,
          curNotice: '',
          clear,
          more,
          New,
          boardData: [],
          boardCount: 0,
          queryBoardInfo: {
              pageIndex: 1,
              pageSize: 10,
              lookStatus: '',
              receiver: September.userId
          },
          boardCol: [
              {
                  title: '类型',
                  key: 'type',
                  minWidth: 50,
                  placement: 'top-left',
                  filter: (type) => {
                      return this.typeFilter(type);
                  }
              },
              {
                  type: 'html',
                  title: '内容',
                  key: 'content',
                  tooltip: true,
                  minWidth: 200,
                  // on:{
                  //   click:(data) => {
                  //     this.showNotice(data)
                  //   }
                  // }
              },
              {
                  type: 'Tag',
                  title: '已读',
                  key: 'lookStatus',
                  minWidth: 60,
                  placement: 'top-left',
                  filter: (lookStatus) => {
                      return lookStatus === 1 ? '是' : '否';
                  },
                  setColor: (lookStatus) => {
                      return lookStatus === 1 ? 'var(--status-yes)' : 'var(--status-no)';
                  },
                  on:{
                    click:(data) => {
                      this.changeMsgRead(data)
                    }
                  }
              },
              {
                  title: '发送人',
                  key: 'senderName',
                  tooltip: true,
                  placement: 'top-left',
                  minWidth: 50
              },
              {
                  type: 'showTime',
                  title: '发送时间',
                  key: 'sendTime',
                  tooltip: true,
                  minWidth: 120
              }
          ],
          loading: false,
          modal: false,
          curNotice: {}
      };
  },
  mounted() {
    this.getBoardCastList();
  },
  watch: {
      notReadCount(val, oldval) {
          this.getBoardCastList();
      }
  },
  computed: {
      ...mapState('board', ['notReadCount']) //未读消息数
  },
  methods: {
      ...mapActions('board', ['getBoardListNotRead']),
      getBoardCastList() {
          this.queryBoardInfo.lookStatus = this.lookStatus;
          boardlist_new(this.queryBoardInfo)
              .then((data) => {
                  if (data.code == 1) {
                      this.boardData = data.data.items.map((item) => {
                        
                        
                        
                          let content;
                          let hasError;
                          try {
                              content = JSON.parse(item.content);
                          } catch (e) {
                              hasError = true;
                          }
                          if (hasError) {
                             //  return item;

                              item.content = item.noticeMsg.content
                              return item
                              
                              
                          } else {
                              return Object.assign(item, {
                                  content: content.content,
                                  bid: content.id,
                                  sceneName: content.sceneName,
                                  title: content.title,
                                  type: content.type
                              });
                          }
                      });
                      this.boardCount = data.data.total;
                  }
              })
              .finally(() => {
                  this.loading = false;
              });
      },
      getData(page, size) {
          this.loading = true;
          this.queryBoardInfo.pageIndex = page;
          this.queryBoardInfo.pageSize = size;
          this.getBoardCastList();
      },
      typeFilter(type) {
          let types = '';
          if (type == 1) {
              types = '事务公告';
          } else if (type == 3) {
              types = '违规公告';
          }
          return types;
      },
      changeLookStatus(val) {
          this.queryBoardInfo.lookStatus = val;
          this.getBoardCastList();
      },
      changePage(page) {
          this.queryBoardInfo.pageIndex = page;
          this.getBoardCastList();
      },
      changeMsgRead(item) {
          if (item.lookStatus == 1) {
              return;
          }
          changeMsgRead(item.id).then((data) => {
              if (data.code == 1) {
                  this.getBoardListNotRead();
                  this.getBoardCastList();
              }
          });
      },
      expandNotice(event, status, item) {
          if (event.target.nodeName === 'A' && event.target.className === 'expand') {
              this.$set(item, 'status', status);
              if (status === true) {
                  this.changeMsgRead(item);
              }
          }
      },
      toBoardPage() {
          this.$emit('hidePop');
          this.$router.push({
              path: '/bulletinReceive'
          });
      },
      showNotice(item) {
          if (event.target.nodeName == 'A' && event.target.href) {
              return;
          }
          this.modal = true;
          this.curNotice = item;
          if (item.lookStatus === 0) {
              this.changeMsgRead(item);
          }
      },
      setChatAllRead() {
          setChatAllRead().then((data) => {
              if (data.code == 1) {
                  this.getBoardListNotRead();
                  this.getBoardCastList();
              }
          });
      },
      //
      clickStatus(item) {
          console.log(item);
      },
      cancelModal(status) {
          this.modal = false;
          setTimeout(() => {
              this.$emit('showPop', true);
          });
      }
  }
};
</script>
<style scoped></style>
<style>
.noticeContent {
  word-break: break-all;
}
.noticeContent pre {
  white-space: normal;
}
</style>
